<template>
  <div id="main">
    <div class="header">
      <div class="header-logo text-center">

        <img
          :src="LOGO"
          class="logo"
        /><span class="app_name">{{APP_NAME}}</span>
      </div>
      <main-user />
    </div>
    <div id="bottom_page">
      <left-menu />
      <div
        id="content"
        v-if="showData"
      >
        <div
          class="content-title"
          v-if="routeMeta&&routeMeta.showTitle"
        >
          {{routeMeta.title}}
        </div>
        <div
          class="content-bread"
          :style="{left:routeMeta.title.length*25+20+'px'}"
          v-if="routeMeta.showBread"
        >
          <s-breadcrumb></s-breadcrumb>
        </div>
        <router-view
          class="content-info"
          @sign="sign"
        />
      </div>
    </div>

  </div>
</template>

<script>
import mainUser from "./components/main-user";
import leftMenu from "./components/left-menu";
import { loginInfo } from "@/api";
import { mapActions } from "vuex";

export default {
  data() {
    const LOGO = this.$config("index", "LOGO");
    const APP_NAME = this.$config("index", "APP_NAME");
    return {
      menus: [],
      showData: true,
      LOGO,
      APP_NAME,
      sign_data: {
        showBread: false
      }
    };
  },
  components: {
    mainUser,
    leftMenu
  },
  computed: {
    routeMeta() {
      return this.$route.meta;
    }
  },
  methods: {
    ...mapActions("auth", { authUpdate: "updateInfo" }),
    getLoginInfo() {
      loginInfo(res => {
        if (res.code === 1) {
          this.menus = res.data.menus;
          this.authUpdate(res.data);
          this.showData = true;
        }
      });
    },
    sign(pData) {
      pData.forEach(element => {
        this.sign_data[element.key] = element.val;
      });
    }
  },
  created() {
    this.getLoginInfo();
  }
};
</script>

<style lang="scss" scoped>
</style>
